<template>
<!-- 概览页 -->
    <div>
        <dv-full-screen-container class="index">
            <!-- 左侧 -->
        <div class="left-box">
           <dv-border-box-3 class="lb-line" >
                <div class="overview">
                    <!-- 上部分 -->
                    <div class="ov-top">
                        <div class="ovt-left">
                            <dv-border-box-9 class="ovt-line">
                                <!-- 1.今日概览 -->
                                <div class="ovt-item">
                                    <div class="title">
                                         <div class="ti-text">
                                            <span style="color:white">今日概览</span>
                                        </div>
                                    </div>
                                    <div class="body">
                                        <div class="items">
                                            <div style="height:50% ">
                                                <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold; color:white">
                                                    今日车流（环比）
                                                </span>
                                            </div>
                                            <div style="height:50%">
                                                <div style="margin-left:0.2rem ;height:100%;text-align: justify;display:block; font-size:0.25rem; font-weight:bold; color:#67C23A">
                                                    165874 
                                                </div>
                                            </div>
                                            <!-- 边框 -->
                                            <svg class="it-tag" viewBox="0 0 100 62">
                                                <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 0 L40 0 L100 0 L100 40 L100 0 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 62 L100 52 L100  62 L90 62 L100 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M30 62 L80 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M0 40 L0 62 L20 62 L0 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                            </svg>
                                        </div>
                                        <div class="items">
                                            <div style="height:50% ">
                                                <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold; color:white">
                                                    今日客流（环比）
                                                </span>
                                            </div>
                                            <div style="height:50%">
                                                <div style="margin-left:0.2rem ;height:100%;text-align: justify;display:block; font-size:0.25rem; font-weight:bold; color:#F56C6C">
                                                    165874 
                                                </div>
                                            </div>
                                            <svg class="it-tag" viewBox="0 0 100 62">
                                                <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 0 L40 0 L100 0 L100 40 L100 0 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 62 L100 52 L100  62 L90 62 L100 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M30 62 L80 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M0 40 L0 62 L20 62 L0 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                            </svg>
                                        </div>
                                        <div class="items">
                                            <div style="height:50% ">
                                                <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold; color:white">
                                                    今日营收（环比）
                                                </span>
                                            </div>
                                            <div style="height:50%">
                                                <div style="margin-left:0.2rem ;height:100%;text-align: justify;display:block; font-size:0.25rem; font-weight:bold; color:#67C23A">
                                                    165874 
                                                </div>
                                            </div>
                                            <svg class="it-tag" viewBox="0 0 100 62">
                                                <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 0 L40 0 L100 0 L100 40 L100 0 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 62 L100 52 L100  62 L90 62 L100 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M30 62 L80 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M0 40 L0 62 L20 62 L0 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                                <!-- 2.智慧停车-->
                                <div class="ovt-item" style="top:33%;">
                                    <div class="title">
                                         <div class="ti-text">
                                            <span style="color:white">智慧停车</span>
                                        </div>
                                    </div>
                                    <div class="body">
                                        <div class="items">
                                            <div style="height:50% ">
                                                <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold; color:white">
                                                    空闲车位
                                                </span>
                                            </div>
                                            <div style="height:50%">
                                                <div style="margin-left:0.2rem ;height:100%;text-align: justify;display:block; font-size:0.25rem; font-weight:bold; color:#409EFF">
                                                    165874 
                                                </div>
                                            </div>
                                            <!-- 边框 -->
                                            <svg class="it-tag" viewBox="0 0 100 62">
                                                <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 0 L40 0 L100 0 L100 40 L100 0 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 62 L100 52 L100  62 L90 62 L100 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M30 62 L80 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M0 40 L0 62 L20 62 L0 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                            </svg>
                                        </div>
                                        <div class="items">
                                            <div style="height:50% ">
                                                <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold; color:white">
                                                    占用车位
                                                </span>
                                            </div>
                                            <div style="height:50%">
                                                <div style="margin-left:0.2rem ;height:100%;text-align: justify;display:block; font-size:0.25rem; font-weight:bold; color:#409EFF">
                                                    165874 
                                                </div>
                                            </div>
                                            <svg class="it-tag" viewBox="0 0 100 62">
                                                <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 0 L40 0 L100 0 L100 40 L100 0 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 62 L100 52 L100  62 L90 62 L100 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M30 62 L80 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M0 40 L0 62 L20 62 L0 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                            </svg>
                                        </div>
                                        <div class="items">
                                            <div style="height:50% ">
                                                <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold; color:white">
                                                    异常车位
                                                </span>
                                            </div>
                                            <div style="height:50%">
                                                <div style="margin-left:0.2rem ;height:100%;text-align: justify;display:block; font-size:0.25rem; font-weight:bold; color:#F56C6C">
                                                    165874 
                                                </div>
                                            </div>
                                            <svg class="it-tag" viewBox="0 0 100 62">
                                                <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 0 L40 0 L100 0 L100 40 L100 0 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 62 L100 52 L100  62 L90 62 L100 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M30 62 L80 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M0 40 L0 62 L20 62 L0 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                            </svg>
                                        </div>
                                    </div>   
                                </div>
                                <!-- 3.智慧厕所 -->
                                <div class="ovt-item" style="top:67%">
                                    <div class="title">
                                         <div class="ti-text">
                                            <span style="color:white">智慧厕所</span>
                                        </div>
                                    </div>
                                    <div class="body">
                                        <div class="items">
                                            <div style="height:50% ">
                                                <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold; color:white">
                                                    占用厕位
                                                </span>
                                            </div>
                                            <div style="height:50%">
                                                <div style="margin-left:0.2rem ;height:100%;text-align: justify;display:block; font-size:0.25rem; font-weight:bold; color:#409EFF">
                                                    165874 
                                                </div>
                                            </div>
                                            <!-- 边框 -->
                                            <svg class="it-tag" viewBox="0 0 100 62">
                                                <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 0 L40 0 L100 0 L100 40 L100 0 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 62 L100 52 L100  62 L90 62 L100 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M30 62 L80 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M0 40 L0 62 L20 62 L0 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                            </svg>
                                        </div>
                                        <div class="items">
                                            <div style="height:50% ">
                                                <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold; color:white">
                                                    异味浓度
                                                </span>
                                            </div>
                                            <div style="height:50%">
                                                <div style="margin-left:0.2rem ;height:100%;text-align: justify;display:block; font-size:0.25rem; font-weight:bold; color:#409EFF">
                                                    165874 
                                                </div>
                                            </div>
                                            <svg class="it-tag" viewBox="0 0 100 62">
                                                <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 0 L40 0 L100 0 L100 40 L100 0 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 62 L100 52 L100  62 L90 62 L100 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M30 62 L80 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M0 40 L0 62 L20 62 L0 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                            </svg>
                                        </div>
                                        <div class="items">
                                            <div style="height:50% ">
                                                <span style="height:100%; position: relative; top:40%; text-align: center;display:block; font-size:0.25rem; font-weight:bold; color:white">
                                                    异常厕位
                                                </span>
                                            </div>
                                            <div style="height:50%">
                                                <div style="margin-left:0.2rem ;height:100%;text-align: justify;display:block; font-size:0.25rem; font-weight:bold; color:#F56C6C">
                                                    165874 
                                                </div>
                                            </div>
                                            <svg class="it-tag" viewBox="0 0 100 62">
                                                <path d="M0 0 L20 0 L0 0 L0 20 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 0 L40 0 L100 0 L100 40 L100 0 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M100 62 L100 52 L100  62 L90 62 L100 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M30 62 L80 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                                <path d="M0 40 L0 62 L20 62 L0 62 Z"  
                                                style="fill:white;stroke:#409EFF;stroke-width:2; stroke-opacity:0.8" />
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </dv-border-box-9>
                        </div>
                        <div class="ovt-right">
                            <dv-border-box-9 class="ovt-line">
                                <!-- 标题 梯形 -->
                                <div class="right-title" style="width: 40%;">
                                    <span style="position: absolute; left:50%; top:30%; transform: translate(-50%); font-size:0.225rem; font-weight:bold; color:white;">商业分析</span>
                                </div>

                            </dv-border-box-9>
                        </div>
                    </div>
                    <!-- 下部分 -->
                    <div class="ov-bottom">
                        <!-- 左侧 -->
                        <div class="ovb-left" style="width: 50%; height: 100%; float: left; display: flex;">
                            <!-- 灯杆 -->
                            <div class="light">
                                <div class="lt-title">
                                    <span style="position: absolute; left:50%; top:20%; transform: translate(-50%); font-size:0.2rem; font-weight:bold; color:white;">智慧灯杆</span>
                                </div>
                                <div class="lt-content">
                                    <div class="lt-items"></div>
                                    <div class="lt-items"></div>
                                    <div class="lt-items"></div>
                                    <div class="lt-items"></div>
                                    <div class="lt-items"></div>
                                    <div class="lt-items"></div>
                                </div>
                            </div>
                            <!-- 设备 -->
                            <div class="device">
                                <div class="lt-title" style="width:80%">
                                    <span style="position: absolute; left:50%; top:20%; transform: translate(-50%); font-size:0.2rem; font-weight:bold; color:white;">设备检测</span>
                                </div>
                                <div class="de-content">
                                    <div class="de-items"></div>
                                    <div class="de-items"></div>
                                    <div class="de-items"></div>
                                    <div class="de-items"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 右侧 -->
                        <div class="ovb-right" style="width: 50%; height: 100%; float: left; display: flex;">
                            <!-- 告警 -->
                            <div class="light">
                                <div class="lt-title">
                                    <span style="position: absolute; left:50%; top:20%; transform: translate(-50%); font-size:0.2rem; font-weight:bold; color:white;">集中告警</span>
                                </div>
                                <div class="alarm-content">
                                    <!-- 多边形区域 -->
                                    <!-- 紧急 -->
                                    <div class="polygon">
                                        <div class="p-text">
                                            <i class="el-icon-s-opportunity" style="font-size:0.25rem;margin-right:0.1rem"></i>
                                            <span>紧急：</span>
                                            <span>2</span>
                                        </div>
                                        <svg class="p-tag" viewBox="0 0 165 54">
                                            <polyline points="24,0 165,0 165,30 141,54 0,54 0,24 24,0"
                                            style=" fill:#F56C6C; fill-opacity:0.6; stroke:#F56C6C; stroke-width:2; stroke-opacity:0.9 "/>
                                        </svg>
                                    </div>
                                    <!-- 重要 -->
                                    <div class="polygon">
                                       <div class="p-text">
                                            <i class="el-icon-s-opportunity" style="font-size:0.25rem;margin-right:0.1rem"></i>
                                            <span>重要：</span>
                                            <span>2</span>
                                        </div>
                                        <svg class="p-tag" viewBox="0 0 165 54">
                                            <polyline points="24,0 165,0 165,30 141,54 0,54 0,24 24,0"
                                            style=" fill:#E6A23C; fill-opacity:0.6; stroke:#E6A23C; stroke-width:2; stroke-opacity:0.9 "/>
                                        </svg>
                                    </div>
                                    <!-- 次要 -->
                                     <div class="polygon">
                                       <div class="p-text">
                                            <i class="el-icon-s-opportunity" style="font-size:0.25rem;margin-right:0.1rem"></i>
                                            <span>次要：</span>
                                            <span>2</span>
                                        </div>
                                        <svg class="p-tag" viewBox="0 0 165 54">
                                            <polyline points="24,0 165,0 165,30 141,54 0,54 0,24 24,0"
                                            style=" fill:#E6E33C; fill-opacity:0.6; stroke:#E6E33C; stroke-width:2; stroke-opacity:0.9 "/>
                                        </svg>
                                    </div>
                                    <div class="polygon">
                                       <div class="p-text">
                                            <i class="el-icon-s-opportunity" style="font-size:0.25rem;margin-right:0.1rem"></i>
                                            <span>警告：</span>
                                            <span>2</span>
                                        </div>
                                        <svg class="p-tag" viewBox="0 0 165 54">
                                            <polyline points="24,0 165,0 165,30 141,54 0,54 0,24 24,0"
                                            style=" fill:#67C23A; fill-opacity:0.6; stroke:#67C23A; stroke-width:2; stroke-opacity:0.9 "/>
                                        </svg>
                                    </div>
                                </div>    
                            </div>
                            <!-- 维修 -->
                            <div class="device">
                                <div class="lt-title" style="width:80%">
                                    <span style="position: absolute; left:50%; top:20%; transform: translate(-50%); font-size:0.2rem; font-weight:bold; color:white;">维修维保</span>
                                </div>
                                <div class="de-content">
                                    <div class="de-items"></div>
                                    <div class="de-items"></div>
                                    <div class="de-items"></div>
                                    <div class="de-items"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>   
            </dv-border-box-3>  
        </div> 
        
        <!-- 右侧 -->
        <div class="right-box">
            <dv-border-box-13 class="rb-line" >
                <!-- 区域一 智慧安防-->
                <div class="security">
                   <div class="se-top">
                       <!-- 标题 -->
                       <div class="title">
                           <div class="ti-text">
                               <span style="color:white">智慧安防</span>
                           </div>
                       </div>
                       <!-- 方块 -->
                       <div class="body">
                           <div class="item">
                                <dv-border-box-8 :dur="15">
                                   <div style="height:100%; width:50%; float:left">
                                    <span style="height:100%; position: relative; top:40%; left:20%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:white">
                                        摄像机总数
                                    </span>
                                </div>
                                <div style="height:100%; width:50%; float:left ">
                                    <span style="height:100%; position: relative; top:40%; left:-20%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">
                                        100
                                    </span>
                                </div>
                                </dv-border-box-8>
                                <!-- <div ></div> -->
                           </div>
                           <div class="item">
                               <dv-border-box-8 :dur="15">
                                   <div style="height:100%; width:50%; float:left">
                                    <span style="height:100%; position: relative; top:40%; left:20%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:white">
                                        在线数
                                    </span>
                                </div>
                                <div style="height:100%; width:50%; float:left ">
                                    <span style="height:100%; position: relative; top:40%; left:-20%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">
                                        90
                                    </span>
                                </div>
                               </dv-border-box-8>
                           </div>
                           <div class="item">
                               <dv-border-box-8 :dur="15">
                                   <div style="height:100%; width:50%; float:left">
                                    <span style="height:100%; position: relative; top:35%; left:20%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:white">
                                        异常
                                    </span>
                                </div>
                                <div style="height:100%; width:50%; float:left ">
                                    <span style="height:100%; position: relative; top:35%; left:-20%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#F56C6C">
                                        10
                                    </span>
                                </div>
                               </dv-border-box-8>
                           </div>
                           <div class="item">
                               <dv-border-box-8 :dur="15">
                                   <div style="height:100%; width:50%; float:left">
                                    <span style="height:100%; position: relative; top:35%; left:20%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:white">
                                        安防事件
                                    </span>
                                </div>
                                <div style="height:100%; width:50%; float:left ">
                                    <span style="height:100%; position: relative; top:35%; left:-20%;text-align: center;display:block; font-size:0.2rem; font-weight:bold; color:#409EFF">
                                        5
                                    </span>
                                </div>
                               </dv-border-box-8>
                           </div>
                       </div>
                       <!-- 视频 -->
                        <div class="camera">
                            <div class="ca-item"></div>
                            <div class="ca-item"></div>
                            <div class="ca-item"></div>
                            <div class="ca-item"></div>
                        </div>

                    </div> 
                    <!-- 区域二 消防-->
                   <div class="se-center">
                       <!-- 标题 -->
                       <div class="title">
                           <div class="ti-text">
                               <span style="color:white">智慧消防</span>
                           </div>
                       </div>
                       <!-- 表格 -->
                       <div class="se-form">
                           <div class="icon" style="width:20%;height:100%;float:left">
                               <div style="width:100%;height:20%;position: absolute;left:10%;top:26%">
                                   <i class="el-icon-delete" style="font-size:0.3rem; color:white"></i>
                               </div>
                               <div style="width:100%;height:20%;position: absolute;left:10%;top:47%">
                                   <i class="el-icon-smoking" style="font-size:0.3rem; color:white"></i>
                               </div>
                               <div style="width:100%;height:20%;position: absolute;left:10%;top:71%">
                                   <i class="el-icon-odometer" style="font-size:0.3rem; color:white"></i>
                               </div>
                               
                           </div>
                           <div class="form" style="width:80%;height:100%;float:left">
                               <center-right-chart></center-right-chart>
                           </div>
                           
                       </div>
                    </div> 

                   <!-- 区域三 广播-->
                   <div class="se-bottom">
                       <!-- 标题 -->
                       <div class="title">
                           <div class="ti-text">
                               <span style="color:white">信息发布</span>
                           </div>
                       </div>
                       <!-- 文本内容 -->
                       <div class="se-text">
                            <div class="icon" style="width:20%;height:100%;float:left">
                                <div style="width:100%;height:20%;position: absolute;left:5%;top:15%">
                                    <i class="el-icon-s-promotion" style="font-size:0.4rem; color:#409EFF"></i>
                                </div>
                            </div>
                            <div class="text" style="width:80%;height:100%;float:left">
                                <div style="width:100%;height:100%;font-size:0.2rem; color:white;text-indent:20px;line-height:160%;">  
                                消防栓总数300个，正常在线200个，异常150个。烟感总数290个，正常在线190个，140个异常。

                                </div>
                            </div>
        
                       </div>

                    </div> 
                </div>
            </dv-border-box-13>
            <!-- 顶部天气插件区域 -->
            <div class="plugin">
                <iframe width="187" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=12&color=%23FFFFFF&icon=1&num=1&site=14"></iframe>
                <div style="width:200px; height: 60px; float:right; color:white;">
                    <dv-decoration-7 style="width:200px;height:60px; font-size:16px;">
                        <router-link to="/home" style="font-size:0.225rem; color:white">返回</router-link>
                    </dv-decoration-7>
                </div>
            </div>
        </div> 
        </dv-full-screen-container>
    </div>
</template>

<script>
import centerRightChart from '../components/echart/chart2.vue'

export default {
    data(){
        return{

        }
    },
    components:{
        centerRightChart,
    },
    methods:{

    }
}
</script>

<style lang="less" scoped>
.index{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 7.5fr 2.5fr;
    background-image: url("../assets/images/pageBg.png");
    background-size: cover;
    .left-box{
        width: 100%;
        height: 100%;
        position: relative;
        // border: 0.025rem solid whitesmoke;
        .lb-line{
            width: 97%;
            height: 92%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%); 
        }
    }
    .right-box{
        width: 100%;
        height: 100%;
        position: relative;
        // border: 0.025rem solid yellowgreen;
        .rb-line{
            width: 90%;
            height: 90%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        // 天气插件、返回主页按钮区域
        .plugin{
            width: 90%;
            height: 0.8rem;
            position: absolute;
            left: 5%;
            // border: 0.025rem solid yellowgreen;
        }
    }
    // 右侧边栏区域
    .security{
        width: 92%;
        height: 96%;
        position: absolute;
        background-color: rgba(64,158,255,0.2);
        box-shadow: inset 1px 1px 20px rgb(64,158,255);
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        // border: 0.025rem solid white;

        // 安防
        .se-top{
            width: 100%;
            height: 50%;
            // border: 0.025rem solid rgba(64,158,255,0.8);
        }
        .title{
            width: 35%;
            height: 0.5rem;
            position: relative;
            left: 3%;
            top: 0.1rem;
            background-color: rgba(64,158,255,0.2);
            box-shadow: inset 1px 1px 10px rgb(64,158,255);
            border-radius: 0.0375rem;
            .ti-text{
                font-size: 0.25rem;
                position: absolute;
                left: 50%;
                top:50%;
                transform: translate(-50%,-50%);
                white-space: nowrap; //强制span标签不换行
            }
        }
        // 方块区域
        .body{
            width: 94%;
            height: 1.6rem;
            position: absolute;
            left: 3%;
            margin-top: 0.3rem;
            display: grid;
            grid-template-columns: repeat(2,48%);
            grid-template-rows: repeat(2,45%);
            grid-row-gap: 0.1rem;
            grid-column-gap: 0.2rem; //左右间距
            justify-content: center; //格子水平居中
            .item{
                background-color: rgba(64,158,255,0.2);
                text-align: center; 
            }
        }
        // 视频区域
        .camera{
            width: 94%;
            height: 3.6rem;
            position: absolute;
            left: 3%;
            top: 2.6rem;
            // border: 0.025rem solid yellowgreen;
            display: grid;
            grid-template-columns: repeat(2,48%);
            grid-template-rows: repeat(2,47%);
            grid-row-gap: 0.2rem;
            grid-column-gap: 0.2rem; //左右间距
            justify-content: center; //格子水平居中
            .ca-item{
                // background-color: rgba(64,158,255,0.2);
                background-image: url("../assets/images/image01.jpg");
                background-size: cover;
            }
        }
        // 消防
        .se-center{
            width: 100%;
            height: 30%;
            margin-top: 0.3rem;
            border: 0.025rem solid rgba(64,158,255,0.2);
            // 表格区域
            .se-form{
                width: 94%;
                height: 3rem;
                position: absolute;
                left: 3%;
                margin-top: 0.2rem;
                // border: 0.025rem solid yellowgreen;
            }
        }
        // 公共广播
        .se-bottom{
            width: 100%;
            height: 20%;
            // border: 0.025rem solid yellowgreen;
            .se-text{
                width: 94%;
                height: 1.6rem;
                position: absolute;
                left: 3%;
                margin-top: 0.2rem;
                // border: 0.025rem solid yellowgreen;
            }
        }
    }
    // 左侧概览区域
    .overview{
        width: 95%;
        height: 93%;
        position: absolute;
        // border: 0.025rem solid rgba(64,158,255,0.8);
        box-shadow: inset 1px 1px 20px rgb(64,158,255);
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    // 上部
    .ov-top{
        width: 100%;
        height: 66%;
        // border: 0.025rem solid red;
        .ovt-left{
            width: 50%;
            height: 100%;
            position: relative;
            float: left;
            background-color: rgba(64,158,255,0.2);
            //  border: 0.025rem solid purple;
        }
        .ovt-right{
            width: 50%;
            height: 100%;
            float: left;
            background-color: rgba(64,158,255,0.2);
            border: 0.025rem solid yellowgreen;
            .right-title{
                position: absolute;
                height: 0.4rem;
                width: 50%;
                background-color: rgba(64,158,255,0.6);
                background: linear-gradient(45deg, transparent 0.5rem, rgba(64,158,255,0.6) 0) left,
                            linear-gradient(-45deg, transparent 0.5rem, rgba(64,158,255,0.6) 0) right;
                background-size: 50% 100%;
                background-repeat: no-repeat;
                left: 50%;
                transform: translate(-50%);
            }
        }
        // 装饰线
        .ovt-line{
            width: 100%;
            height: 100%;
        }

        .ovt-item{
            width: 98%;
            height: 33%;
            position: absolute;
            left: 1%;
            //  border: 0.025rem solid yellowgreen;
            .title{
                width: 20%;
                height: 0.5rem;
                position: relative;
                left: 2%;
                top: 0.125rem;
                background-color: rgba(64,158,255,0.3);
                box-shadow: inset 1px 1px 10px rgb(64,158,255);
                border-radius: 0.0375rem;
                .ti-text{
                    font-size: 0.25rem;
                    position: absolute;
                    left: 50%;
                    top:50%;
                    transform: translate(-50%,-50%);
                    white-space: nowrap;
                }
            }
            .body{
                width: 96%;
                height: 2rem;
                position: absolute;
                left: 2%;
                margin-top: 0.25rem;
                // box-shadow: inset 1px 1px 10px rgb(64,158,255);
                display: flex;
                justify-content: space-between;
                align-items: center;  //垂直居中
                .items{
                    width: 2.6rem;
                    height: 80%;
                    background-color: rgba(64,158,255,0.2);
                    position: relative;
                    .it-tag{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left:0;
                        top: 0;
                    }
                }
            }

        }
    }
    // 下部
    .ov-bottom{
        width: 100%;
        height: 30%;
        margin-top: 0.4rem;
        border: 0.025rem solid rgba(64,158,255,0.8);
        // 路灯
        .light{
            position: relative;
            width: 65%;
            height: 82%;
            margin-top: 0.35rem;
            background-color: rgba(64,158,255,0.2);
            .lt-content{
                position: absolute;
                height: 80%;
                width: 100%;
                top:0.6rem;
                background-color: rgba(64,158,255,0);
                // border: 0.025rem solid yellowgreen;
                display: grid;
                grid-template-columns: repeat(3,31%);
                grid-template-rows: repeat(2,45%);
                grid-row-gap: 0.2rem; //上下间距
                grid-column-gap: 0.15rem; //左右间距
                justify-content: center; //格子水平居中\
                align-content: center;
            }
        }
        .lt-title{
            position: absolute;
            height: 0.4rem;
            width: 50%;
            background-color: rgba(64,158,255,0.3);
            background: linear-gradient(45deg, transparent 0.5rem, rgba(64,158,255,0.3) 0) left,
                        linear-gradient(-45deg, transparent 0.5rem, rgba(64,158,255,0.3) 0) right;
            background-size: 50% 100%;
            background-repeat: no-repeat;
            left: 50%;
            transform: translate(-50%);
        }
        .lt-items{
            background-color: rgba(64,158,255,0.2);
            box-shadow: inset 0px 0px 0.1rem rgb(64,158,255);
            border-radius: 0.075rem;
        }
        // 设备
        .device{
            width: 33%;
            height: 82%;
            position: relative;
            margin-top: 0.35rem;
            margin-left: 0.1rem;
            background-color: rgba(64,158,255,0.2);
            .de-content{
                width: 100%;
                height: 80%;
                position: absolute;
                top: 0.6rem;
                // border: 0.025rem solid yellowgreen;
                display: grid;
                grid-template-columns: repeat(2,45%);
                grid-template-rows: repeat(2,45%);
                grid-row-gap: 0.2rem; //上下间距
                grid-column-gap: 0.15rem; //左右间距
                justify-content: center; //格子水平居中\
                align-content: center;
            }
        }
        .de-items{
            background-color: rgba(64,158,255,0.2);
            box-shadow: inset 0px 0px 0.1rem rgb(64,158,255);
            border-radius: 0.075rem;
        }
        .alarm-content{
            position: absolute;
            height: 60%;
            width: 100%;
            top: 1rem;
            // border: 0.025rem solid yellowgreen;
            display: flex;
            justify-content: space-around;
            align-content: space-around;
            flex-wrap: wrap;
        }
        .polygon{
            width: 2.4rem;
            height: 0.6rem;
            position: relative;
            // border: 0.025rem solid aqua;
            .p-tag{
                width: 100%;
                height: 100%;
            }
            .p-text{
                font-size: 0.2rem;
                position: absolute;
                left: 50%;
                top:50%;
                transform: translate(-50%,-50%);
                color: white;
            }
        }
    }

}
</style>